<template>
	<view class="tabbar-container">
		<block>
			<view class="tabbar-item" v-for="(item, index) in tabbarList" :class="[item.centerItem ? ' center-item' : '']" @click="changeItem(item)">
				<view class="item-top"><image :class="[index === 1 ? 'imageTwo' : '']" :src="currentItem == item.id ? item.selectIcon : item.icon"></image></view>
				<!-- :class="[currentItem == item.id ? 'item-active' : '']" -->
				<view class="item-bottom">
					<!-- :class="[currentItem == item.id ? 'black' : 'red']" -->
					<text>{{ item.text }}</text>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
export default {
	props: {
		currentPage: {
			type: Number,
			default: 0
		}
	},
	name: 'tabbar',
	data() {
		return {
			currentItem: 0,
			tabbarList: [
				/*  */
				{
					id: 0,
					path: '/pages/index/index',
					icon: '/static/img/navBar/2214.svg',
					selectIcon: '/static/img/navBar/2214.svg',
					text: '主页',
					centerItem: false
				},
				/*  */
				{
					id: 1,
					path: '/pages/message/message',
					icon: '/static/img/navBar/55348.svg',
					selectIcon: '/static/img/navBar/55348.svg',
					text: '信息',
					centerItem: false
				},
				/*  */
				{
					id: 2,
					path: '/pages/friendGroup/friendGroup',
					icon: '/static/img/navBar/54761.svg',
					selectIcon: '/static/img/navBar/54761.svg',
					text: '圈子',
					centerItem: false
				},
				/*  */
				{
					id: 3,
					path: '/pages/safe/safe',
					icon: '/static/img/navBar/54776.svg',
					selectIcon: '/static/img/navBar/54776.png',
					text: '安全',
					centerItem: false
				}
			]
		};
	},
	mounted() {
		this.currentItem = this.currentPage;
		uni.hideTabBar();
	},
	methods: {
		changeItem(item) {
			let _this = this;
			console.log(1, 'tab');
			console.log(item.path);
			console.log(item);
			// this.currentItem = item.id;
			uni.switchTab({
				url: item.path
			});
		}
	}
};
</script>
<style lang="scss">
.black {
	color: black;
}
.red {
	color: red;
}
view {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

.tabbar-container {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	/* height: 110rpx; */
	// height: 162rpx;
	// height: 76px;
	height: 152rpx;
	// height: 120rpx;
	background-color: #ffffff;
	/* box-shadow: 0rpx -20rpx 72rpx 2rpx rgba(0, 0, 0, 0.11); */
	/* border-radius: 82rpx 82rpx 82rpx 82rpx; */
	display: flex;
	// align-items: center;
	/* padding: 5rpx 0; */
	/* color: #999999; */
	color: #a4a5ac;
	z-index: 1000;
}

.tabbar-container .tabbar-item {
	// padding-top: 20rpx;
	width: 33.33%;
	// height: 100rpx;
	display: flex;
	flex-direction: column;
	// justify-content: center;
	align-items: center;
	text-align: center;
}

.tabbar-container .item-active {
	// color: #f00;
	color: #9d52fa;
}

.tabbar-container .center-item {
	display: block;
	position: relative;
}

.tabbar-container .tabbar-item .item-top {
	width: 70rpx;
	// height: 70rpx;
	// padding: 10rpx;
	padding: 20rpx 10rpx 5rpx 10rpx;
}

.tabbar-container .center-item .item-top {
	flex-shrink: 0;
	width: 100rpx;
	height: 100rpx;
	position: absolute;
	top: -50rpx;
	left: calc(50% - 50rpx);
	border-radius: 50%;
	box-shadow: 0 0 5px #999;
	background-color: #ffffff;
}

.tabbar-container .tabbar-item .item-top image {
	// width: 100%;
	// height: 100%;
	width: 40rpx;
	height: 40rpx;
}

.imageTwo {
	width: 48rpx !important;
	height: 40rpx !important;
}

.tabbar-container .tabbar-item .item-bottom {
	// font-size: 28rpx;
	// font-size: 24rpx;
	font-size: 20rpx;
	// color: red !important;
	width: 100%;
}

.tabbar-container .center-item .item-bottom {
	position: absolute;
	bottom: 5rpx;
}
</style>
